import { useState, useEffect, ForwardRefRenderFunction, useImperativeHandle, memo, forwardRef, useRef, useCallback, useMemo } from 'react'
import './style.less'
import Step1 from './step1'
import Step2 from './step2'
import Step3 from './step3'
import { Tabs, Modal } from 'antd'
import type { TabsProps } from 'antd'
import { useTypeStore } from '@/store/useOperationDataItem'
import { message } from '@hs-admin/utils'

interface Props {
  dataItemProductIds: string[]
  finish: (params: any) => void
}
const OperationIndustryDataItemDetail: ForwardRefRenderFunction<unknown, Props> = (props: Props, ref: any) => {
  const { dataItemProductIds, finish } = props
  const [dataItem, setDataItem] = useState<any>({})
  const tabKey = useTypeStore((state) => state.tabKey)
  const setTabKey = useTypeStore((state) => state.setTabKey)
  const setp1Save = useTypeStore((state) => state.setp1Save)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const step1Ref = useRef<any>(null)
  const step2Ref = useRef<any>(null)

  const back = useCallback(() => {
    setDataItem({})
    step1Ref.current.cancel()
    step2Ref.current && step2Ref.current.cancel()
    setIsModalOpen(false)
    setTabKey('1')
  }, [setTabKey])
  const submit = useCallback(
    (params: any) => {
      if (dataItemProductIds.includes(params.id)) {
        message.warning('新增数据项不可重复')
        return
      }
      finish(params)
      back()
    },
    [back, dataItemProductIds, finish]
  )
  const onChange = useCallback(
    (key: string) => {
      if ((key === '2' || key === '3') && !dataItem.id && !setp1Save) {
        message.warning('请先保存数据项信息')
        return
      }
      setTabKey(key)
    },
    [setTabKey, dataItem.id, setp1Save]
  )
  const items: TabsProps['items'] = useMemo(
    () => [
      {
        key: '1',
        label: '数据项信息',
        children: <Step1 ref={step1Ref} dataItem={dataItem} back={back} finish={submit} />
      },
      {
        key: '2',
        label: '核心字段',
        children: <Step2 ref={step2Ref} dataItem={dataItem} back={back} finish={submit} />
      },
      {
        key: '3',
        label: '样例数据',
        children: <Step3 dataItem={dataItem} back={back} finish={submit} />
      }
    ],
    [back, dataItem, submit]
  )
  const showModal = (item: any) => {
    setDataItem(item || {})
    setIsModalOpen(true)
  }

  useEffect(() => {
    const ele: any = items.find((item) => item.key === tabKey)
    setTabKey(ele.key)
  }, [tabKey, items, setTabKey])

  useImperativeHandle(
    ref,
    () => {
      return {
        showModal
      }
    },
    []
  )

  return (
    <Modal
      title={`${dataItem.id ? '编辑' : '新增'}数据项`}
      open={isModalOpen}
      onCancel={back}
      footer={null}
      centered
      className="operation-industry-data-item-modal">
      <Tabs activeKey={tabKey} items={items} onChange={onChange} />
    </Modal>
  )
}

export default memo(forwardRef(OperationIndustryDataItemDetail))
